<link rel="stylesheet/less" type="text/css" href="./bricks/component/header/header.less"/>

<header class="ub-header-b">
    <div class="ub-container">
        <div class="menu">
            <a href="/member_message">
                <i class="iconfont icon-bell"></i>
                <span class="badge">5</span>
            </a>
            <a href="/member"><i class="iconfont icon-user"></i> 用户</a>
            <a href="#">退出</a>
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
        <div class="logo">
            <a href="#">
                <img data-src="placeholder/400x100"/>
            </a>
        </div>
        <div class="nav-mask"
             onclick="$(this).closest('.ub-header-b').removeClass('show');$('body').removeClass('scroll-lock');"></div>
        <div class="nav">
            <div class="search">
                <div class="box">
                    <form action="#" method="get">
                        <input type="text" name="keyword" placeholder="搜索内容"/>
                        <button type="submit"><i class="iconfont icon-search"></i></button>
                    </form>
                </div>
            </div>
            <a href="#" class="active">首页</a>
            <div class="nav-item">
                <div class="sub-title">
                    二级
                </div>
                <div class="sub-nav">
                    <a class="sub-nav-item" href="#">子导航A</a>
                    <a class="sub-nav-item" href="#">子导航B</a>
                    <a class="sub-nav-item" href="#">子导航C</a>
                </div>
            </div>
            <a href="#">导航B</a>
        </div>
        <a class="nav-toggle" href="javascript:;"
           onclick="$(this).closest('.ub-header-b').toggleClass('show');$('body').addClass('scroll-lock');">
            <i class="show iconfont icon-list"></i>
            <i class="close iconfont icon-close"></i>
        </a>
    </div>
</header>
<div class="ub-header-b-placeholder"></div>

<header class="ub-header-b transparent">
    <div class="ub-container">
        <div class="menu">
            <a href="/member_message">
                <i class="iconfont icon-bell"></i>
                <span class="badge">5</span>
            </a>
            <a href="/member"><i class="iconfont icon-user"></i> 用户</a>
            <a href="#">退出</a>
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
        <div class="logo">
            <a href="#">
                <img data-src="placeholder/400x100"/>
            </a>
        </div>
        <div class="nav-mask" onclick="$(this).closest('.ub-header-b').removeClass('show')"></div>
        <div class="nav">
            <div class="search">
                <div class="box">
                    <form action="#" method="get">
                        <input type="text" name="keyword" placeholder="搜索内容"/>
                        <button type="submit"><i class="iconfont icon-search"></i></button>
                    </form>
                </div>
            </div>
            <a href="#">首页</a>
            <a href="#" class="active">导航A</a>
        </div>
        <a class="nav-toggle" href="javascript:;" onclick="$(this).closest('.ub-header-b').toggleClass('show')">
            <i class="show iconfont icon-list"></i>
            <i class="close iconfont icon-close"></i>
        </a>
    </div>
</header>


<header class="ub-header-b primary">
    <div class="ub-container">
        <div class="menu">
            <a href="/member_message">
                <i class="iconfont icon-bell"></i>
                <span class="badge">5</span>
            </a>
            <a href="/member"><i class="iconfont icon-user"></i> 用户</a>
            <a href="#">退出</a>
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
        <div class="logo">
            <a href="#">
                <img data-src="placeholder/400x100"/>
            </a>
        </div>
        <div class="nav-mask" onclick="$(this).closest('.ub-header-b').removeClass('show')"></div>
        <div class="nav">
            <div class="search">
                <div class="box">
                    <form action="#" method="get">
                        <input type="text" name="keyword" placeholder="搜索内容"/>
                        <button type="submit"><i class="iconfont icon-search"></i></button>
                    </form>
                </div>
            </div>
            <a href="#">首页</a>
            <a href="#" class="active">导航A</a>
        </div>
        <a class="nav-toggle" href="javascript:;" onclick="$(this).closest('.ub-header-b').toggleClass('show')">
            <i class="show iconfont icon-list"></i>
            <i class="close iconfont icon-close"></i>
        </a>
    </div>
</header>

<div class="ub-container">
    <div class="block-placeholder">
        <p data-repeat="20">话说天下大势，合久必分，分久必合。</p>
    </div>
</div>
